<template>
	<view class="wrapper">
		<view class="ipt_view">
			<input class="ipt" type="number" :placeholder="isChangePhone?'请输入(新)手机号':'请输入手机号'" v-model.trim="phone"/>
		</view>
			
		<view class="ipt_view">
			<input class="ipt" type="number" placeholder="请输入验证码" v-model.trim="code"/>
			<text class="code" v-if="!timer" @click="sendSmsfn">发送验证码</text>
			<text class="code" v-else>{{ count }}s后可重新发送</text>
		</view>
		
		<view class="button_view" @click="changePhone" v-if="isChangePhone">
			<text v-if="!loginLoad">修改手机号</text>
			<text v-else>正在修改...</text>
		</view>
		<view class="button_view" @click="bindPhonefn" v-else>
			<text v-if="!loginLoad">登录</text>
			<text v-else>正在登录...</text>
		</view>
		
	</view>
</template>

<script>
	import { getSendCodeApi,toLoginApi,changePhoneApi, } from "@/helper/apis/books.js"
	export default {
		data() {
			return {
				phone: '',
				code: '',
				timer: null,
				count: 59,
				
				loginLoad:false,	// 是否是正在登录
				isChangePhone:false,	// 是否是修改手机号（true表示要修改）
			};
		},
		onLoad(options) {
			const { isChangePhone } = options;
			this.isChangePhone = isChangePhone;
		},
		methods:{
			async sendSmsfn() {
			    const phoneData = this.phone.trim();
			    if (!phoneData) {
					return uni.$zm_showMsg('请先输入手机号');
			    }
			    getSendCodeApi({ 'phone': phoneData }).then(res => {
					uni.$zm_showMsg('发送成功');
					clearInterval(this.timer);
					this.timer = setInterval(() => {
						this.count--
						if (this.count <= 0) {
							clearInterval(this.timer)
							this.count = 59;
							this.timer = null;
						}
					}, 1000)
			    }).catch(err=>{
			    })
			},
			async bindPhonefn() {		// 绑定手机号登录
			    const { phone, code } = this;
			    const phoneStr = phone.trim();
			    const codeStr = code.trim();
			    if (!phoneStr) {
					return uni.$zm_showMsg('请先输入手机号')
			    }
			    if (!codeStr) {
					return uni.$zm_showMsg('请输入验证码')
			    }
			    try{
					this.loginLoad = true;
					const ob = { phone:phoneStr, code:codeStr };
					const res = await toLoginApi(ob);
					if(res.code == 200){
						const token = (res.data && res.data.token) ? res.data.token : "";
						if(token){
							await uni.setStorageSync("token",token);
						}
						// 缓存用户信息
						await uni.setStorageSync("phone",res.data.phone);
						await uni.setStorageSync("userinfo",res.data);
						this.loginLoad = false;
						console.log("=======登录成功========打印");
						setTimeout(()=>{
							console.log("=======登录成功========打印22222");
							uni.$jumpPage({ back:1 });
						},400);
					}else{
						this.loginLoad = false;
					}
			    }catch(err){
					this.loginLoad = false;
			    }
			},
			async changePhone() {		// 修改手机号
			    const { phone, code } = this;
			    const phoneStr = phone.trim();
			    const codeStr = code.trim();
			    if (!phoneStr) {
					return uni.$zm_showMsg('请先输入手机号')
			    }
			    if (!codeStr) {
					return uni.$zm_showMsg('请输入验证码')
			    }
			    try{
					this.loginLoad = true;
					const ob = { phone:phoneStr, code:codeStr };
					const res = await changePhoneApi(ob);
					if(res.code == 200){
						const token = (res.data && res.data.token) ? res.data.token : "";
						if(token){
							await uni.setStorageSync("token",token);
						}
						// 更新缓存的手机号
						await uni.setStorageSync("phone",res.data.phone);
						this.loginLoad = false;
						setTimeout(()=>{
							uni.$jumpPage({ back:1 });
						},400);
					}else{
						this.loginLoad = false;
					}
			    }catch(err){
					this.loginLoad = false;
			    }
			},
		}
	}
</script>

<style lang="less">
.wrapper{
	width: 100%;
	height: 100vh;
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	.ipt_view {
	    width: 100%;
		height: 100rpx;
	    padding: 30rpx;
		box-sizing: border-box;
		background-color: #efefef;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		display: flex;
		.ipt{
			flex: 1;
		}
		.code{
			color: red;
		}
	}
	.button_view{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #ff4141;
		border-radius: 20rpx;
		margin-top: 100rpx;
		text-align: center;
		text{
			color: #fff;
		}
	}
}
</style>
